import { Button } from 'antd'
import { Component } from 'react'

import { navigateBack } from '@/router/navigate'

class ErrorBoundary extends Component {
  constructor(props) {
    super(props)
    this.state = {
      hasError: false,
      errorInfo: '',
    }
  }

  static getDerivedStateFromError(error) {
    // 更新state以便下一次渲染显示降级后的UI
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    // 你可以在这里记录错误到服务器等操作
    this.setState({ errorInfo: error.stack })
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义一个替代UI来渲染，例如一个回退界面
      return (
        <div className='p20px'>
          <Button
            onClick={() => {
              this.setState({ hasError: false })
              navigateBack()
            }}
          >
            返回
          </Button>
          {this.state.errorInfo.split('\n').map((item, index) => (
            <div key={index}>{item}</div>
          ))}
        </div>
      )
    }
    return this.props.children
  }
}

export default ErrorBoundary
